<template>
  <div>
    <p v-if='isReadOnlyPage === true' style="word-break:break-all;">{{ value }}</p>
    <a-input v-else v-model='values' @change='handleChange' @blur="onBlurFn" :disabled="isDisabled" />
  </div>
</template>

<script>
export default {
  name: 'TextField',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: ['value', 'isReadOnlyPage', 'isDisabled'],
  data () {
    return {
      values: ''
    }
  },
  watch: {
    value: function (ele) {
      this.values = ele ? ele.toString() : ''
    }
  },
  methods: {
    handleChange (value) {
      this.$emit('change', value)
    },
    onBlurFn () {
      this.$emit('onBlurFn', true)
    }
  }
}
</script>
